<template>
	<view class="home-category">
			<view class="categoruImg" v-for="(item,index) in categoryList" :key="item.id" @click="toCategoryDetail(item.id)">
				<image :src="item.cover" mode="aspectFill"></image>
				<text>{{item.name}}</text>
			</view>

		
	</view>
</template>

<script>
	export default{
	
		data(){
			return{
				categoryList:[],
				list:[1,2,3,4,5],
			}
		},
		mounted(){
			uni.setNavigationBarTitle({
				title:'分类'
			}),
			this.getList()
		},
		methods:{
			getList(){
				this.request({
					url:'http://157.122.54.189:9088/image/v1/vertical/category'
				})
				.then(res => {
					this.categoryList =  res.data.res.category
					console.log(this.categoryList)
				})
			},
			toCategoryDetail(e){
				console.log(e)
				uni.navigateTo({
					url:`/pages/category/index?id=${e}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.home-category{
		height: calc(100vh - 36px);
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.categoruImg{
			width: 33.33%;
			height: 250rpx;
			position: relative;
			image{
				height: 100%;
				width: 100%;
				border: 10rpx solid #fff;
			}
			text{
				font-weight: 600;
				font-size: 40rpx;
				color:#fff;
				position: absolute;
				bottom:20rpx;
				right: 80rpx;
			}
		}
	}
</style>
